<template>
  <div>
<!--    <div ref="chartDom" style="width: 100vh;height:(100vh-80px);"></div>-->
    <div :style="chartStyle" ref="chartDom"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {computed, onMounted, ref} from 'vue';
import { getAllList } from '@/api/utils';

const theList = ref({
  detailList: [],
  animationList: [],
  bookList: [],
  caricatureList: [],
  documentaryList: [],
  movieList: [],
  teleplayList: [],
});

const chartDom = ref(null);

// onMounted(async () => {
//   try {
//     const res = await getAllList();
//     theList.value = res;
//
//     // console.log(theList.value.animationList.length)
//     // 基于准备好的dom，初始化echarts实例
//     const myChart = echarts.init(chartDom.value);
//
//     // 指定图表的配置项和数据
//     const option = {
//       title: {
//         text: '列表个数统计'
//       },
//       tooltip: {},
//       legend: {
//         data:['个数']
//       },
//       xAxis: {
//         data: ['我的','动漫', '电视剧', '电影', '纪录片', '书籍', '漫画', ] // 根据实际情况调整
//       },
//       yAxis: {},
//       color: ['#ff7f0e', '#1f77b4', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2'], // 为每个柱状图项指定颜色
//
//       series: [{
//         name: '个数',
//         type: 'bar',
//         data: [
//           theList.value.detailList.length,
//           theList.value.animationList.length,
//           theList.value.teleplayList.length,
//           theList.value.movieList.length,
//           theList.value.documentaryList.length,
//           theList.value.bookList.length,
//           theList.value.caricatureList.length,
//         ]
//       }]
//     };
//
//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
//   } catch (error) {
//     console.error('Error fetching data:', error);
//   }
// })
onMounted(async () => {
  try {
    const res = await getAllList();
    theList.value = res;

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(chartDom.value);

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '现有个数统计'
      },
      tooltip: {},
      legend: {
        data:['个数']
      },
      xAxis: {
        fontSize: 20,
        data: ['我的','动漫', '电视剧', '电影', '纪录片', '书籍', '漫画', ] // 根据实际情况调整
      },
      yAxis: {},
      series: [{
        // name: '个数',
        type: 'bar',
        label: {
          show: true, // 显示标签
          position: 'right', // 标签位置
          fontSize: 20, // 标签字体大小

        },
        data: [
          { value: theList.value.detailList.length, itemStyle: { color: '#ff7f0e' } },
          { value: theList.value.animationList.length, itemStyle: { color: '#1f77b4' } },
          { value: theList.value.teleplayList.length, itemStyle: { color: '#2ca02c' } },
          { value: theList.value.movieList.length, itemStyle: { color: '#d62728' } },
          { value: theList.value.documentaryList.length, itemStyle: { color: '#9467bd' } },
          { value: theList.value.bookList.length, itemStyle: { color: '#8c564b' } },
          { value: theList.value.caricatureList.length, itemStyle: { color: '#e377c2' } },
        ]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
})

// 计算属性，用于动态设置图表的样式
const chartStyle = computed(() => {
  return {
    width: '',
    height: `calc(100vh - 80px)`
  };
});
</script>

<style lang="scss" scoped>
// 可以在这里添加一些样式，比如居中显示
</style>
